<template>
    <el-dialog v-model="appDialog.visible" :title="appDialog.title" :width="appDialog.width">
        <div class="content">
            <div class="item">
                <div class="tile">快速注册小程序</div>
                <div class="desc">填写企业信息并完成法人身份即可快速创建认证小程序无需认证费用，立即得到审核结果</div>
                <div class="btn"><el-button type="primary" @click="onRegisterApplet('1')">去注册</el-button></div>
            </div>
            <div class="item">
                <div class="tile">复用公众号资质创建小程序</div>
                <div class="desc">绑定已认证公众号即可一键注册认证小程序无需认证费用，立即得到审核结果</div>
                <div class="btn"><el-button type="primary" @click="onRegisterApplet('2')">去注册</el-button></div>
            </div>
        </div>
    </el-dialog>
    <SelectOfficialAccounts
        v-if="isShowSelectOfficialAccounts"
        :id="(state.official_account_id as number)"
        v-model:show="isShowSelectOfficialAccounts"
        @submit="onOfficial">
        <template #descTitle>
            <div class="desc-title">需先授权公众号后再复用该公众号资质</div>
        </template>
    </SelectOfficialAccounts>
</template>
<script setup lang="ts">
import Dialog from '@/components/Dialog.vue';
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getFastRegUrl } from '@/api/channelconfig/marketingApplet';
import SelectOfficialAccounts from '@/components/common/SelectOfficialAccounts.vue';

interface StateType {
    [propsName: string]: string | number;
    is_set_mini: number;
    is_set_official: number;
}
const router = useRouter();

const officialRef = ref<any>(null);
const isShowSelectOfficialAccounts = ref<boolean>(false);
const state = reactive<StateType>({
    mini_program_src: '/static/material/mini_program.png',
    official_accounts_src: '/static/material/official_accounts.png',
    mini_app_name: '',
    official_account_name: '',
    mini_program_id: 0,
    official_account_id: 0,
    is_set_mini: 1, // 1 未配置  2 已配置
    is_set_official: 1 // 1 未配置  2 已配置
});

const appDialog = reactive<any>({
    visible: false,
    title: '注册',
    width: '1000px',
    cancelText: '',
    submitText: '',
    mini_program_type: ''
});

const onRegisterApplet = (type?: any) => {
    if (type == 1) {
        router.push({
            path: '/channelconfig/qywechat/marketingApplet/registerFillin',
            query: {
                type: appDialog.mini_program_type
            }
        });
    }
    if (type == 2) {
        isShowSelectOfficialAccounts.value = true;
    }
};

const onOfficial = async (val: any) => {
    const params = {
        official_id: String(val),
        front_callback_url: `https://${window.location.host}/redirect-info-guide?type=ticket&official_id=${val}&mini_program_type=${appDialog.mini_program_type}`,
        mini_program_type: appDialog.mini_program_type
    };
    const res = await getFastRegUrl(params);
    if (res.url) {
        window.open(res.url, '_blank');
    }
};

defineExpose({
    appDialog
});
// 1
</script>
<style lang="scss" scoped>
.content {
    margin: 72px 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item {
        padding: 24px;
        width: 294px;
        background: #ffffff;
        box-shadow: 0px 2px 24px 0px rgba(234, 234, 234, 1);
        border-radius: 4px;
        border: 1px solid #eaeaea;
        .title {
            font-size: 16px;
            color: #33302d;
            line-height: 22px;
        }
        .desc {
            padding-top: 16px;
            font-size: 14px;
            color: #33302d;
            line-height: 20px;
        }
        .btn {
            margin-top: 36px;
            text-align: right;
        }
    }
}
.desc-title {
    padding-bottom: 5px;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
}
</style>
